<!-- templates/product_catalog.html -->
{% extends 'base.html' %}
{% load static %}
{% block content %}

<style>
    .card-product {
        transition: transform 0.2s ease;
        cursor: pointer;
        height: 420px; /* 固定高度 */
        display: flex;
        flex-direction: column;
    }

    .card-product:hover {
        transform: translateY(-5px);
    }

    .product-image {
        max-height: 150px; /* 减小图片高度 */
        min-height: 150px; /* 固定最小高度 */
        object-fit: cover; /* 裁剪图片以适应容器 */
        width: 100%; /* 图片宽度占满容器 */
        border-radius: 8px;
    }

    .default-product-image {
        max-height: 150px; /* 固定高度 */
        min-height: 150px; /* 固定最小高度 */
        width: 100%; /* 图片宽度占满容器 */
        background-color: #f8f9fa; /* 灰色背景 */
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        color: #adb5bd;
        font-size: 2rem;
        border: 1px solid #dee2e6;
    }

    .card-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 1;
        padding: 0.75rem; /* 减少内边距 */
    }

    .price-tag {
        position: absolute;
        top: 10px;
        right: 10px;
        /* 改为蓝色价格标签 */
        background-color: #3f729b;
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 0.9rem;
        z-index: 1;
    }

    /* 更小的字体大小 */
    .card-body p {
        font-size: 0.85rem; /* 减小文字大小 */
        margin-bottom: 0.3rem; /* 减小段落间距 */
    }

    .card-body strong {
        min-width: 80px; /* 为标签设置最小宽度保持对齐 */
        display: inline-block;
    }
</style>


<div class="container py-5">
    <h3 class="mb-4 text-center">🛍️ 商品目录 - 可购买的农产品</h3>

    <!-- 搜索表单 -->
    <form method="get" action="{% url 'product_catalog' %}" class="mb-4">
        <div class="input-group">
            <input type="text" name="q" value="{{ query }}" class="form-control" placeholder="请输入商品名称、原材料来源或生产过程进行搜索...">
            <button class="btn btn-outline-secondary" type="submit">搜索</button>
        </div>
    </form>

    {% if products.object_list %}
    <div class="row g-4">
        {% for product in products.object_list %}
        <div class="col-md-3">
            <div class="card card-product shadow-sm h-100" style="position: relative;">
                <div class="card-body d-flex flex-column">
                    <!-- 显示价格标签 -->
                    <div class="price-tag">{{ product.price|floatformat:2 }} 元</div>

                    <!-- 图片展示 -->
                    {% if product.product_image %}
                    <img src="{{ product.product_image.url }}" alt="产品图片" class="product-image mb-3">
                    {% else %}
                    <!-- 默认图片 -->
                    <div class="default-product-image mb-3">
                        <i class="fas fa-box-open"></i> <!-- 使用Font Awesome图标 -->
                    </div>
                    {% endif %}

                    <!-- 基本信息 -->
                    <p><strong>原材料来源：</strong>{{ product.raw_material_source|truncatechars:50 }}</p>
                    <p><strong>生产过程：</strong>{{ product.production_process|truncatechars:50 }}</p>
                    <p><strong>检验批次：</strong>{{ product.inspection_batch }}</p>
                    <p><strong>生产时间：</strong>{{ product.created_at|date:"Y-m-d" }}</p>


                    <!-- 商品卡片中的按钮部分 -->
<div class="d-grid mt-auto">
    <a href="#" class="btn btn-success btn-sm"
       data-bs-toggle="modal"
       data-bs-target="#confirmPurchaseModal"
       data-product-id="{{ product.id }}"
       data-product-name="{{ product.product_name|truncatechars:50 }}"
       data-product-process="{{ product.production_process|truncatechars:50 }}"
       data-product-batch="{{ product.inspection_batch }}"
       data-product-price="{{ product.price|floatformat:2 }}">

       立即购买
    </a>
</div>


                </div>
            </div>
        </div>
        {% endfor %}
    </div>


    <!-- 分页导航 -->
    <div class="pagination justify-content-center mt-5">
        <nav>
            <ul class="pagination">
                {% if products.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ products.previous_page_number }}">&laquo;</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <span class="page-link">&laquo;</span>
                </li>
                {% endif %}

                {% for i in products.paginator.page_range %}
                {% if products.number == i %}
                <li class="page-item active">
                    <span class="page-link">{{ i }} <span class="sr-only">(current)</span></span>
                </li>
                {% else %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ i }}">{{ i }}</a>
                </li>
                {% endif %}
                {% endfor %}

                {% if products.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ products.next_page_number }}">&raquo;</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <span class="page-link">&raquo;</span>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>

<!-- 购买确认模态框 -->
<div class="modal fade" id="confirmPurchaseModal" tabindex="-1" aria-labelledby="confirmPurchaseModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="post" id="buyProductForm">
                {% csrf_token %}
                <input type="hidden" name="product_id" id="modal-product-id">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmPurchaseModalLabel">确认购买</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p><strong>商品名称：</strong><span id="modal-product-name"></span></p>
                    <p><strong>生产过程：</strong><span id="modal-product-process"></span></p>
                    <p><strong>检验批次：</strong><span id="modal-product-batch"></span></p>
                    <p><strong>价格：</strong><span id="modal-product-price"></span> 元</p>

                    <hr>

                    <div class="mb-3">
                        <label for="shipping_address" class="form-label">收货地址</label>
                        <textarea name="shipping_address" id="shipping_address" class="form-control" rows="3" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="quantity" class="form-label">购买数量</label>
                        <input type="number" name="quantity" id="quantity" class="form-control" min="1" value="1" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-success">确认下单</button>
                </div>
            </form>
        </div>
    </div>
</div>


    {% else %}
    <div class="alert alert-info text-center mt-5">
        当前没有可购买的商品。
    </div>
    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var confirmPurchaseModal = document.getElementById('confirmPurchaseModal');
    var productIdInput = document.getElementById('modal-product-id');
    var productNameSpan = document.getElementById('modal-product-name');
    var productProcessSpan = document.getElementById('modal-product-process');
    var productBatchSpan = document.getElementById('modal-product-batch');
    var productPriceSpan = document.getElementById('modal-product-price');

    // 表单字段
    var form = document.getElementById('buyProductForm');
    var addressInput = document.getElementById('shipping_address');
    var quantityInput = document.getElementById('quantity');

    confirmPurchaseModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var productId = button.getAttribute('data-product-id');
        var productName = button.getAttribute('data-product-name');
        var productProcess = button.getAttribute('data-product-process');
        var productBatch = button.getAttribute('data-product-batch');
        var productPrice = button.getAttribute('data-product-price');

        // 设置隐藏字段
        productIdInput.value = productId;

        // 显示字段
        productNameSpan.textContent = productName;
        productProcessSpan.textContent = productProcess;
        productBatchSpan.textContent = productBatch;
        productPriceSpan.textContent = productPrice;

        // 设置表单 action
        form.setAttribute('action', "{% url 'place_order' 0 %}".replace("0", productId));

        // 清空表单字段
        addressInput.value = '';
        quantityInput.value = 1;
    });
});
</script>





{% endblock %}
